<template>
  <nav-bar>
    <template v-slot:default>地址管理</template>
  </nav-bar>

  <div v-show="list.length === 0" style="margin-top:200px;text-align: center;">
    还没有地址信息，去添加吧！
  </div>

  <div class="address-list">
    <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        @select="onSelect"
    />
  </div>

</template>

<script>
import {ref, reactive, toRefs, onMounted} from "vue";
import {useRoute, useRouter} from "vue-router";
import {Toast} from "vant";
import NavBar from "components/common/navbar/NavBar";
import {getAddressList, defaultAddress} from "network/address";

export default {
  name: "Address",
  components: {
    NavBar
  },
  setup() {
    const route = useRoute(),
        router = useRouter()

    // 数据模型
    const state = reactive({
      chosenAddressId: 1,
      list: []
    })

    // 数据方法
    const init = () => {
      getAddressList().then(res => {
        if (res.data.length === 0) return;
        state.list = res.data.map(item => {
          return {
            id: item.id,
            name: item.name,
            tel: item.phone,
            address: `${item.province} ${item.city} ${item.county} ${item.address}`,
            isDefault: !!item.is_default,
          }
        })
        // res.data.map(item => state.list.push({
        //   id: item.id,
        //   name: item.name,
        //   tel: item.phone,
        //   address: `${item.province} ${item.city} ${item.county} ${item.address}`,
        //   isDefault: !!item.is_default,
        // }))
        let addressDefault = state.list.filter(item => item.isDefault)
        if (addressDefault.length) {
          state.chosenAddressId = addressDefault[0].id
        } else {
          state.chosenAddressId = 1
        }
        Toast.clear()
      })
    }

    // 地址管理
    const onAdd = () => {
      router.push({name: 'AddressEdit', query: {type: 'add'}})
    }
    const onEdit = (item, index) => {
      router.push({name: 'AddressEdit', query: {type: 'edit', addressId: item.id}})
    }
    const onSelect = (item, index) => {
      const {id} = item
      state.list.forEach(el => {
        if (el.id === id) el.isDefault = true
        else el.isDefault = false
      })
      state.chosenAddressId = id
      defaultAddress(id).then(res => {
        if (res.status === 204) {
          Toast.success('设置默认地址成功')
        } else {
          Toast.fail('设置默认地址失败')
          init()
        }
      })
    }

    onMounted(() => {
      Toast.loading({message: '加载中...', forbidClick: true})
      init()
    })
    return {
      ...toRefs(state), onAdd, onEdit, onSelect
    }
  }
}
</script>

<style lang="scss">
.address-list {
  margin-top: 45px;
  .van-address-list__bottom {
    bottom: 50px;
  }
  .van-button {
    background: var(--color-tint);
    border-color: var(--color-tint)
  }
}
</style>